import React from 'react'
import { View } from '@tarojs/components'
import { AtDivider } from "taro-ui"
import {HospitalItem} from './HospitalItem'
import {TipsDivider} from '../common/TipsDivider'
import {Nothing} from '../common/Nothing'

class HospitalItems extends React.Component{

  constructor(){
    super(...arguments)
    this.state = {
      allNum:this.props.data.length,
      showNum:10
    }
  }

  showMore = (num) =>{
    if (num<this.state.allNum-10) {
      this.setState({showNum:num+10})
    }else{
      this.setState({showNum:this.state.allNum})
    }
  }

  render(){ 
    return(
      <View className='hospital-items'>
        {this.props.data==''?
          <Nothing/>
        :<View>
        {
          this.props.data.slice(0,this.state.showNum).map(
            (item) => {
              return  <HospitalItem 
                picture = {item.picture}
                name = {item.hospitalName}
                address = {item.address}
                hospital_id= {item.hospitalId}
              ></HospitalItem>
            }
          )
        }
         {
          this.state.allNum>this.state.showNum?
            <View onClick={this.showMore.bind(this,this.state.showNum)} className='divider'>
              <AtDivider content='点击查看更多' fontColor='#d7d7d7'/>
            </View>
          :<TipsDivider/>
        }
        </View>
      }
      </View>
    )
  }
}
  
export {HospitalItems}